<template>
  <div class="hello">
    <!-- 图标的容器 -->
  <div ref="chartContainer" class="chartContainer"></div>
  </div>
</template>

<script>
import axios  from "axios";
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
import  dayjs  from "dayjs";

export default {
  name: 'HelloWorld',
  data(){
    return{
      hourly:[],
      hourWeatherData:{
        fxTime:[],//x轴数据
        temp:[]//seriesData
      }
    }
  },
  created(){
    this.getData();
  },
  methods:{
    getData(){
        axios.get("https://devapi.qweather.com/v7/weather/24h",{
          params:{
            key:"964642047d5d4666a0c75dca845cf60b",
            location:101270101
          }
        }).then(res =>{
          console.log(res);
          this.hourly = res.data.hourly;
          this.hourly.forEach(element => {
            this.hourWeatherData.fxTime.push(element.fxTime)
            this.hourWeatherData.temp.push(element.temp)
          });
          // console.log(this.hourWeatherData.fxTime)
          // console.log(this.hourWeatherData.temp)
          // let array =  this.hourWeatherData.fxTime.map(data => dayjs(data).format("HH"))
          // console.log(array)
          this.initChart(
            this.hourWeatherData.fxTime.map(data => dayjs(data).format("HH")),
            this.hourWeatherData.temp)
        })
    },
    //设置图标
    initChart(xAxisoData,seriesData){
      var chartDom = this.$refs.chartContainer;
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data:xAxisoData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // data: [150, 230, 224, 218, 135, 147, 260],
            data:seriesData,
            type: 'line'
    }
  ]
};

option && myChart.setOption(option);

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chartContainer{
  height: 200px;

}
</style>
